<template>
  <div>
    <navbar></navbar>
    <lunbo></lunbo>
    <div class="detailst">
      <h3>{{detais.newsTitle}}</h3>
      <div class="details1">
        <div class="lists">
          <span>{{detais.infopubldate}}</span>
          <img src="../../assets/img/1.png" width="17px" alt="">
          <a href="javascript:;" class="a-lis">cdc</a>
          <a href="javascript:;" class="a-lis a2">区块链</a>
          <a href="javascript:;" class="a-lis a3">消费链</a>
        </div>
        <div class="lists-r">
          <a href="javascript:;" @click="isPraise">
            <img src="../../assets/img/like1.png" width="16px" height="15px" alt="" v-show="isimg">
            <img src="../../assets/img/like.png" width="16px" height="15px" alt="" v-show="imgs">
            <span>{{detais.likes}}</span>
          </a>


          <a href="javascript:;" @click="isForward">
            <img src="../../assets/img/fx.png" width="16px" height="15px">
            <span>{{detais.shares}}</span>
          </a>

          <a href="javascript:;">
            <img src="../../assets/img/pl.png" width="16px" height="15px" alt="">
            <span>777</span>
          </a>
        </div>
      </div>
      <div class="detailst-two">
        <p class="p1">{{detais.content}}</p>

      </div>
    </div>
    <div>
      <div class="main">
        <textarea id="tex" cols="60" rows="6" maxlength="100" class="texs" v-model="commentcontent"></textarea>
        <br>
        <input type="button" value="发表评论" id="ipt" v-on:click="loadComments">
        <div>
          <div class="uscomments">
            <div class="uscomments1" v-for="(ite,index) in commentslist">
              <div class="personal-img">
                <img src=""/>
              </div>
              <div class="uscomments-one">
					 	           <span class="usname">
					 		              lala
					 	          </span>
                <div>
                  <a href="javascript:;">
                    <img src="" width="15px"/>
                    <span id="">888</span>
                  </a>
                  <a href="javascript:;" @click='cldComment(index)'>回复</a>
                  <a href="javascript:;">举报</a>
                </div>
              </div>
              <p>了了了了了了了了</p>
              <div class="replylis" v-show='issh=index'>
                <input type="" value="" v-model="repcomments" placeholder="回复 风清扬"/>
                <span class="spa" v-on:click="cldRep(item.id,ite.id,index)">
                         	       	     回复
                         	       </span>
              </div>
              <div class="rep" v-show=false>
                <span>啦啦啦：程序猿</span>
                <a href="javascript:;">删除评论</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <message></message>
    <floot></floot>
  </div>
</template>

<script>import navbar from '@/components/compon/navbar'
import floot from '@/components/compon/floot'
import message from '@/components/compon/message'
import lunbo from '@/components/compon/lunbo'
import conf from '../../config/config'

export default {
  components: {
    lunbo,
    navbar,
    floot,
    message
  },
  data () {
    return {
      id: '',
      detais: '',
      commentcontent: '',
      repcomments: '',
      uscomList: [],
      commentslist: [],
      isimg: true,
      imgs: false,
      issh: null
    }
  },
  mounted () {
    this.id = this.$route.params.id //拿到通过路由传过来的ID
    this.getDetail(this.id)
    this.getCommens(this.id)
  },
  methods: {
//		获取资讯详情
    getDetail (id) {
      let params = {
        'newsId': id
      }
      this.$fetch('/indexNews/getNewInfo', params).then(response => {
        let r = response.data
        this.detais = r.data
      })
    },
//		获取评论
    getCommens (id) {
      this.$fetch('/indexNews/getNewsCommentList' + '?newsId=' + id + '&commentType=1').then(response => {
        let r = response.data
        console.log(r)
        if (r != null && r.length > 0) {
          this.commentslist = r
        } else {
          this.vs = !this.vs
          this.isvs = !this.isvs
        }
      })

    },
//		添加评论
    loadComments () {
      let idst = this.id
      let params = {
        'newsId': idst,
        'content': this.commentcontent,
        'parentId': 0,
        'commentType': 1,
        'newsType': 0
      }
      this.$post('/indexNews/addNewsComment', params).then(response => {
        let r = response.data
        this.uscomList = r
        this.commentcontent = ''
      })
    },
//		点击回复
    cldComment (index) {
      console.log(index)
      this.issh = index
    },
//		添加子评论
    cldRep () {

    },
//		 点赞
    isPraise () {
      if (this.isimg) {
        this.isimg = !this.isimg
        this.imgs = !this.imgs
        this.detais.likes += 1
        let params = {
          'type': 0,
          'newsId': this.id,
          'likeInd': 0
        }
        this.$post('/indexNews/addNewsLikesOrDislikes', params).then(response => {
          let r = response.data
          console.log(r)
        })
      }
    },
//		 转发
    isForward () {
      ++this.detais.shares
      let params = {
        'newsId': this.id
      }
      this.$post('/indexNews/addNewsShares', params).then(response => {
        let r = response.data
        console.log(r)
      })
    }
  }
}</script>

<style scoped>
  @import '../../assets/css/pages/datailst.css';

  .main .uscomments {
    width: 100%;
    padding-top: 20px;
    border-bottom: 1px #4290cf solid;
    margin: 0 auto 20px auto;

  }

  .uscomments .personal-img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px #4290cf solid;
    margin: 5px;
    float: left;
  }

  .uscomments1 {
    overflow: hidden;
    border-bottom: 1px solid #919AA7;
    margin-bottom: 20px;
  }

  .uscomments-one {
    width: 88%;
    margin: 20px 0 28px 60px;
  }

  .uscomments-one div {
    float: right;
    margin-right: 10px;
  }

  .uscomments-one a {

    font-size: 14px;
    color: #000000;
    margin: 10px;
  }

  .uscomments p {
    margin-left: 50px;
    margin-bottom: 10px;
  }

  .main .comments-v {
    position: absolute;
    height: 50px;
    width: 100%;
    line-height: 50px;
    text-align: center;
    background-color: #eff8ff;
    margin-bottom: -25px;
  }

  .uscomments-no {
    width: 100%;
    height: 80px;
    text-align: center;
    line-height: 80px;
    background-color: #ffffff;
  }
</style>
